<template>
  <div class="select-container">
    <!-- radio -->
    <div>
      <el-radio v-model="radio" label="1" @change="changeRadio($event)"
        >全部</el-radio
      >
      <el-radio v-model="radio" label="2" @change="changeRadio($event)"
        >跟进中</el-radio
      >
      <el-radio v-model="radio" label="3" @change="changeRadio($event)"
        >已跟进</el-radio
      >
    </div>
    <!-- 搜索 -->
    <div class="form">
      <el-input
        prefix-icon="el-icon-search"
        placeholder="请输入内容"
        style="width: 250px"
        size="small"
      ></el-input>
      <!-- 按钮组 -->
      <div>
        <el-button type="primary" size="small" @click="tips">检索</el-button>
        <el-dropdown size="small" :hide-on-click="false">
          <el-button size="small">过滤</el-button>
          <el-dropdown-menu slot="dropdown" align="center">
            <el-dropdown-item>
              <el-switch v-model="value1" inactive-text="业务标题"> </el-switch>
            </el-dropdown-item>
            <el-dropdown-item
              ><el-switch v-model="value2" inactive-text="购买物"> </el-switch
            ></el-dropdown-item>
            <el-dropdown-item
              ><el-switch v-model="value3" inactive-text="是否跟进"> </el-switch
            ></el-dropdown-item>
            <el-dropdown-item
              ><el-switch v-model="value4" inactive-text="发起时间"> </el-switch
            ></el-dropdown-item>
            <el-dropdown-item
              ><el-switch v-model="value5" inactive-text="结束时间"> </el-switch
            ></el-dropdown-item>
            <el-button
              type="primary"
              size="mini"
              style="margin: 10px 0 10px 40px"
              >提交</el-button
            >
            <el-button size="mini" style="margin: 10px">取消</el-button>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="info" size="small" @click="dialogVisible = true"
          >添加</el-button
        >
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <form-table></form-table>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import formTable from './formTable'
export default {
  name: "selectbar",

  components:{
    formTable
  },

  data() {
    return {
      radio: "1",
      value1: "1",
      value2: "1",
      value3: "1",
      value4: "1",
      value5: "1",
      dialogVisible: false
    };
  },

  mounted() {},

  methods: {
    changeRadio(val) {
      this.$emit("changeRadioVal", val);
    },
    tips(){
      const h = this.$createElement;
        this.$notify({
          title: '提示！！',
          message: h('i', { style: 'color: teal'}, '该功能未开发！！')
        });
    }
  },
};
</script>

<style lang="less" scoped>
.select-container {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  > .form {
    display: flex;
    width: 480px;
    justify-content: space-between;
    justify-items: center;
    align-items: center;
    > div {
      > .el-button {
        margin: 0 10px;
      }
    }
  }
}
</style>